<template>
  <div class="dy-main BringForwardIptResult">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">转账结果</x-header>
    </div>
    <div class="dy-body mybg">
      <div v-if="requestData.tranMode === '1'" class="message-box">
        <div class="img-box-success"></div>
        <div class="financial-buy-result">转账成功!<p style="color:#999;">资金实时转入收款行，实际时间取决于收款行</p></div>
      </div>
      <div v-else-if="requestData.tranMode === '2'" class="message-box">
        <div class="img-box-submit"></div>
        <div class="financial-buy-result">转账申请已提交!<p style="color:#999;">您的延时转账申请已提交成功。转账资金2-4小时后到账，节假日及非工作时间顺延。次日转账执行前，您可通过“延迟转账查询”撤销该笔交易，或查询次日转账的执行结果。</p></div>
      </div>
      <div v-else class="message-box">
        <div class="img-box-failed"></div>
        <div class="financial-buy-result">转账失败!<p style="color:#999;">您的转账交易失败，您可以重新转账。</p></div>
      </div>
      <group v-show="requestData.tranMode === '1' || requestData.tranMode == '2'">
          <!-- <p><span>转出卡号</span><span>{{requestData.cardNo}}</span></p>
          <p><span>收款人姓名</span><span>{{requestData.payeeName}}</span></p>
          <p><span>收款人账号</span><span>{{requestData.payeeNo}}</span></p>
          <p><span>转账金额</span><span>{{requestData.tranAmt}}</span></p>
          <p><span>收款人开户行</span><span>{{requestData.bankCode}}</span></p> -->
          <cell title="转账金额" :value="requestData.tranAmt | filterMoney">元</cell>
          <cell title="收款人姓名" :value="requestData.payeeName"></cell>
          <cell title="收款人账号" :value="requestData.payeeNo"></cell>
          <cell title="收款人开户行" :value="requestData.bankCode"></cell>
          <cell title="转账账户" :value="requestData.cardNo"></cell>
      </group>
      <div class="submitBtn">
        <x-button type="primary" @click.native="goBack">重新转账</x-button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable camelcase */
export default {
  data () {
    return {
      requestData: {
        cardNo: '', // 转出卡号
        payeeName: '', // 收款人姓名
        payeeNo: '', // 收款人账号
        tranAmt: '', // 转账金额
        bankCode: '', // 收款人开户行
        bankBranch: '', // 网点名称
        routeFlag: '3', // 转账方式 1-本行转账，2-超级网银转账，3-二代支付转账
        tranMode: '1', // 到账模式
        mobile: '' // 接收短信号码
      }
    }
  },
  computed: {
    bringForwardInfo () {
      return this.$store.getters.getBringForwardInfo
    }
  },
  mounted: function () {
    this.requestData.cardNo = this.bringForwardInfo.cardNo
    this.requestData.payeeName = this.bringForwardInfo.getManName
    this.requestData.payeeNo = this.bringForwardInfo.getCardNo
    this.requestData.bankCode = this.bringForwardInfo.getBank
    this.requestData.tranAmt = this.bringForwardInfo.transferMoney
    this.requestData.tranMode = this.bringForwardInfo.tranMode
  },
  methods: {
    goNext: function () {
      this.$router.push({name: 'BringForwardTranDetail'})
    },
    setInfoToVuex () { // 将状态管理清空
      // 添加信息状态管理
      let lBringForwardInfo = {
        transferMoney: '', // 转账金额
        getManName: '', // 收款人姓名
        getCardNo: '', // 收款人账号
        getBank: '', // 收款银行
        getNetPoint: '', // 收款网点
        tranMode: '', // 到账模式
        msg: '', // 附言
        cardNo: '', // 转出卡号
        routeFlag: '' // 转账模式
      }
      this.$store.commit('setBringForwardInfo', lBringForwardInfo) // 将数据保存到状态管理
    },
    goBack: function () {
      this.$router.push({name: 'BringForwardInput'})
      this.setInfoToVuex() // 清空状态管理器
    },
    back () {
      this.$publicFun.goBack(this)
    },
    refreshTest: function () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'CI009004', 'basic_Data': {'requestData': _this.requestData}}}),
        function (response) {
          _this.success = response.data.status
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            // _this.requestData = response.data.data[0]
          } else {
            console.log('fail')
          }
        }
      )
    }
  },
  created () {
    this.refreshTest()
  }
}
</script>

<style lang='less'>
.BringForwardIptResult{
  .message-box{
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding-bottom: .4rem;
  }
  .submitBtn{
    position:absolute;
    left: 0;
    bottom: .8rem;
    width: 100%;
    padding: 0 .4rem;
  }
  .img-box-failed,
  .img-box-submit,
  .img-box-success{
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .8rem;
    margin-bottom: .52rem;
    margin-left: 50%;
    transform: translateX(-50%);
    background: url(../../../static/icon/success-arrow.svg) no-repeat left top;
    background-size: 100% 100%;
  }
  .img-box-failed{
    background: url(../../../static/icon/failed-arrow.svg) no-repeat left top;
  }
  .img-box-submit{
    background: url(../../../static/icon/attention-arrow.svg) no-repeat left top;
  }
  .financial-buy-result{
    text-align: center;
    font-size: .28rem;
  }
  .financial-buy-result-detail{
    font-size:.28rem;
    margin:.68rem .3rem 1.12rem .3rem;
    padding: 0.26rem .3rem;
    border-radius: .28rem;
  }
  .financial-buy-result-detail>div{
    padding: .14rem 0;
  }
  .result-item-left{
    width:30%;
    float: left;
    color:rgba(153,153,153,1);
  }
  .result-item-right{
    display:inline-block;
    text-align: right;
    width:70%;
    color:rgba(51,51,51,1);
  }
  .financial-result-button{
    width: 3rem;
    height: .88rem;
    margin: .3rem auto 0;
    line-height: .88rem;
    font-size: .34rem;
    color: #FFF;
    text-align: center;
    background: #EC1B30;
    border-radius: 0.06rem;
  }
  .show-box{
    width: 6.9rem;
    background: #fafafa;
    margin: 1.22rem auto;
    border-radius: .2rem;
    &>p{
      line-height: .6rem;
      overflow: hidden;
      padding: 0 .26rem;
      span:first-child{
        float: left;
      }
      span:last-child{
        float: right;
      }
    }
  }
}
</style>
